
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>学习 - layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<table class="layui-hide" id="article" lay-filter="article"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>



<div id="content" style="display: none">
    <form class="layui-form" action="" method="get">
        <div class="layui-form-item">
            <label class="layui-form-label">文章标题</label>
            <div class="layui-input-block">
                <input type="hidden" name="id" >
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文章分类</label>
            <div class="layui-input-block">
                <input type="text" name="category" required  lay-verify="required" placeholder="请输入分类" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文章作者</label>
            <div class="layui-input-block">
                <input type="text" name="author" required  lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>


</body>

<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="layui/layui.js"></script>
<script src="../../major_two/library/jquery.min.js"></script>


<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;

        table.render({
            elem: '#article'
            ,url:'http://127.0.0.1/major_five/three/blog/public/api/list'/*改成我们自己写的接口*/
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                ,{field:'title', title:'标题', width:120, edit: 'text'}
                ,{field:'author', title:'作者', width:150, edit: 'text'}
                ,{field:'category', title:'分类', width:150, edit: 'text'}
                ,{field:'content', title:'内容', width:150, edit: 'text'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
        });

        //头工具栏事件
        table.on('toolbar(article)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(article)', function(obj){
            console.log(obj);
            var data = obj.data;
            // console.log(obj);
            // console.log(data);return false;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    var id = data.id;
                    // 确认之后
                    $.ajax({
                        url:'http://127.0.0.1/major_five/three/blog/public/api/del',//请求地址
                        data:{id:id},//请求参数
                        dataType:'json',//返回数据格式
                        success:function (result) {
                            if (result.code == 0) {
                                obj.del();
                                layer.close(index);
                                table.reload("article");
                            }
                        }
                    });
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    title: '文章编辑页面'
                    ,content: $('#content').html()
                    ,area: ['700px', '500px']
                    ,btn: ['确定', '取消','第三个按钮']
                    ,success: function(layero, index){
                        // 弹出成功后做的事情
                        $("[name='title']").val(obj.data.title);
                        $("[name='category']").val(obj.data.category);
                        $("[name='author']").val(obj.data.author);
                        $("[name='desc']").val(obj.data.content);
                        $("[name='id']").val(obj.data.id);
                        // console.log(layero, index);
                    }
                    ,yes: function(index, layero){
                        // 点击 确认、是不是发送请求
                        // 获取表单的数据
                        var form_data = $('form').eq(1).serialize();
                        $.ajax({
                            url:'http://127.0.0.1/major_five/three/blog/public/api/editor?' + form_data,
                            data: {},
                            dataType:'json',
                            success:function (result) {
                                if(result.code == 0) {
                                    layer.msg("修改成功");
                                    table.reload("article");
                                } else {
                                    layer.msg("修改失败");
                                }
                            }
                        });
                        //按钮【按钮一】的回调
                    }
                    ,btn2: function(index, layero){
                        layer.msg('22');
                        //按钮【按钮二】的回调

                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });
            }
        });
    });
</script>




</html>